<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Register</title>
<link href="css/java_tech_css.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
        jQuery(document).ready(function() {
                jQuery("#ajaxButton").click(function() {
                        jQuery.ajax({
                                type : "POST",
                                url : "help.jsp",
                                success : function(html) {
                                        jQuery("#responseDiv").html(html);
                                }
                        });
                });
        });
</script>
</head>
<body>
	<div id="container">
		<div class="banner">
			<img alt="banner" src="images/customLogo.jpg">
		</div>
		<div class="visitor-info">
				<h3>Visitor Information</h3>
			</div>
		<div class="content">
			<div class="form">
				<form action="Search.jsp" method="post" id="input_form" name="formRegister"
				onsubmit="return checkAll();">
				<div class="row">
						<div class="col1">
							<p>Username :</p>
						</div>
						<div class="col2">
							<input type="text" name="username" id="username"/>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>Password :</p>
						</div>
						<div class="col2">
							<input type="password"  name="password" id="password"/>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>Re-Password :</p>
						</div>
						<div class="col2">
							<input type="password" name="repassword" id="repassword"/>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>First name :</p>
						</div>
						<div class="col2">
							<input type="text" name="firstname" id="firstname"/>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>Last name :</p>
						</div>
						<div class="col2">
							<input type="text" name="lastname"/>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>Gender :</p>
						</div>
						<div class="col2">
							<select>
								<option value="male">Male</option>
								<option value="female">Female</option>
								<option value="other">Other</option>
							</select>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>Telephone :</p>
						</div>
						<div class="col2">
							<input type="text" name="telephone"/>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>Email :</p>
						</div>
						<div class="col2">
							<input type="text" name="email"/>
						</div>
					</div>
					<div class="row">
						<div class="col1">
							<p>You are in :</p>
						</div>
						<div class="col2 area">
							<ul>
								<li class="place-row1">
									<input type="radio" name="area"/>Europe
									<input type="radio" name="area"/>Africa
								</li>
								<li class="place-row2">
									<input type="radio" name="area"/>Australia
									<input type="radio" name="area"/>Asia
									<input type="radio" name="area"/>America
								</li>
							</ul>
						</div>
					</div>
					<div class="clear"></div>
					<div class="row">
						<div class="col1">
							<p>What are your hobbies :</p>
						</div>
						<div class="col2 hobby">
							<ul>
								<li>
									<input type="checkbox" name="swimming" />Swimming
									<input type="checkbox" name="cooking" />Cooking
									<input type="checkbox" name="shopping" />Shopping
								</li>
								<li>
									<input type="checkbox" name="sport" />Sport
									<input type="checkbox" name="dance" />Dance
									<input type="checkbox" name="sing" />Sing
								</li>
							</ul>
						</div>
					</div>
					<div class="clear"></div>
					<div class="row">
						<div class="col1">
							<p>Description :</p>
						</div>
						<div class="col2">
							<textarea name="description" rows="6" cols="30">
								
							</textarea>
						</div>
					</div>
					<div class="button">
						<input type="submit" value="Register">
						<a href="#" id="ajaxButton">Help to register</a>
					</div>
				</form>
			</div>
			<div id="responseDiv"></div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery-1.9.0.js"></script>	
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/messages_vi.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$("#input_form").validate({
	        rules: {
	        	
	    		username: {
	    	  		required: true,
	    	  	},
	    	  	
	    		password: {
	    	  		required: true,
	    	  	},
	    	  	
				repassword: {
					equalTo: "#password" // So sánh trường cpassword với trường có id là password
				},
	        	//First name must be characters and not contain number
	    		firstname: {
	    	  		required: true,
	    	  		maxlength: 20
	    	  	},
	    	  	//Last name must be characters and not contain number
	    	  	lastname: {
	    	  		required: true,
	    	  		maxlength: 20
	    	  	},
	    	  	//Must be number
	    	  	telephone: {
	    	  		maxlength: 11,
	    	  		number: true
	    	  	},
	    	  	//Must be [a..Z][0..9]@[a..Z].
	    	  	email: {
	    	  		maxlength: 50,
	    	  		email: true
	    	  	},
	    	  	description: {
	                maxlength: 200
	    	  	},
	        }, 
	        messages: {
	        	username: {
	    	  		required: "User name must be a string",
	    	  	},
	    	  	password: {
	    	  		required: "Password isn't empty !",
	    	  	},    	  	
	        	firstname: {
	    	  		required: "First name must be a string",
	    	  	},
	    	  	lastname: {
	    	  		required: "Last name must be a string",
	    	  	},
	    	  	telephone: {
	    	  		required: "Please fill in this field",
	    	  	},
	    	  	email: {
	    	  		required: "Please fill in this field",
	    	  	},
	    	  	description:{
	    	  		required: "Please fill in this field",
	    	  	}
	        }
	    }); 
	})
	
	function checkAll() {
		var username = document.formRegister.username.value;
		var firstname = document.formRegister.firstname.value;
		var lastname = document.formRegister.lastname.value;
		var email = document.formRegister.email.value;
		var n;
		if (firstname == "") {
			alert(" invalid firstname");
			return false;
		}
		n = firstname.length;
		while ( n > 0) {
			if (firstname.charAt(n-1) > '0' && firstname.charAt(n-1) < '9') {
				alert(" firstname khong duoc chu ky tu so: " + firstname.charAt(n-1));
				return false;
			}
			n--;
		}
		
		n = lastname.length;
		while ( n > 0) {
			if (lastname.charAt(n-1) > '0' && lastname.charAt(n-1) < '9') {
				alert(" lastname khong duoc chu ky tu so: " + lastname.charAt(n-1));
				return false;
			}
			n--;
		}
		if ($('input[name=area]:checked').length <= 0) {
		    alert(" You must to select a area");
		    return false;
		}
		
		var rs = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$");
		if(!email.match(rs)) {
			alert(" invalid email");
			return false;
		}
	}
	
	</script>
</body>
</html>